/* BACKGROUND IMAGE OF WEBSITE */
body {
    background-image: url("../IMAGES/home-background-image.jpg");
}

/* NAV BAR CONTAINERS CONTAINER */
#logoHeader {
    margin-top: 0px;
    width: 25%;
}

#contentHeader {
    margin-top: 0px;
    width: 70%;
    margin-left: auto;
}

/* NAV BAR CONTAINER */
table {
    overflow-x: hidden;
    width: 100%;
    height: 22vh;
    top: 0;
    left: 0;
    right: 0;
    font-family: "Quicksand", "Garamond", serif;
    z-index: 10;
}

/* EACH OPTION IN THE NAV BAR TABLE */
th {
    font-family: "Quicksand", "Garamond", serif;
    font-size: larger;
    text-align: center;
}

/* HOME IMAGE ON NAV BAR */
#LogoHome {
    width: 20vh;
    height: 20vh;
}

/* MAKING SURE THE BUTTONS DONT THROW OFF THE FLOW */
.topBar {
    background-color: rgb(213, 213, 213);
    color: rgb(0, 0, 0);
    border-color: rgba(167, 167, 167, 0.8);;
    font-family: "Quicksand", "Garamond", serif;
    font-size: clamp(0.85rem, 2vw, 2rem);
    width: 100%;
    height: 100%;
    cursor: pointer;
}

/* CURRENT PAGE ON NAVBAR HIGHLIGHTED */
#currentpage {
    color: rgb(251, 95, 181);
}

/* CHANGE BUTTON COLOR WHEN MOUSE IS OVER */
.topBar:hover, #currentpage:hover, #ShopButton:hover, #ReviewButton:hover {
    background-color: rgba(167, 167, 167, 0.8);
    color: rgb(254, 21, 161);
    font-size: 2.5rem;
}

/* MAIN DISPLAY CONTAINER */
#ShopAndFeaturedContainer {
    overflow-x: hidden;
    display: flex;
    width: 100%;
}

/* SHOP ENCOURAGEMENT CONTAINER */
#ShopContainer {
    width: 50%;
}

/* SHOP ENCOURAGEMENT TEXT */
#ShopText {
    font-family: "Quicksand", "Garamond", serif;
    text-align: center;
    font-size: 32px;
}

/* SHOP BUTTON */
#ShopButton {
    background-color: rgb(213, 213, 213);
    color: rgb(0, 0, 0);
    border-color: rgba(167, 167, 167, 0.8);;
    font-family: "Quicksand", "Garamond", serif;
    font-size: clamp(0.85rem, 2vw, 2rem);
    width: 90%;
    height: 35%;
    margin-left: 5%;
    cursor: pointer;
}

/* FEATURED SALE CONTAINERS */
#FeaturedImageContainer {
    width: 40%;
}

#FeaturedTextContainer {
    width: 45%;
}

/* FEATURED IMAGE */
#FeaturedImage {
    width: 30vw;
    height: 30vw;
    object-fit: contain;
}

/* FEATURED TEXT */
#FeaturedText {
    font-family: "Quicksand", "Garamond", serif;
    text-align: center;
    font-size: 32px;
    margin-right: 25%;
    box-shadow: 0px 0px 7px black;
}

/* AGENCIES REFERENCE CONTAINER */
#AgenciesContainer {
    display: flex;
    background-color: rgba(235, 212, 222, 0.5);
    width: 100%;
    overflow-x: hidden;
}

/* AGENCIES REFERENCE TITLE */
#AgenciesText {
    margin-left: 5%;
    font-family: "Quicksand", "Garamond", serif;
    font-size: 32px;
    text-align: center;
    width: 10%;
}

/* AGENCY LOGOS */
.AgencyLogos {
    margin: 2.5% 0 0 5%;
    width: 75px;
    height: 75px;
    object-fit: contain;
}

/* REVIEWS */
#ReviewsContainer {
    margin-left: 5%;
    width: 60%;
}

/* REVIEWS TITLE */
#ReviewsTitle {
    font-family: "Quicksand", "Garamond", serif;
    font-size: 32px;
    font-weight: bold;
    text-align: center;
}

/* REVIEWS */
.ReviewTexts {
    font-family: "Quicksand", "Garamond", serif;
    font-size: 24px;
}

/* REVIEWED PRODUCT CONTAINERS */
.ReviewedProductContainers {
    display: flex;
    width: 100%;
}

/* REVIEWED PRODUCT IMAGES */
.ReviewedProductImages {
    padding-right: 5%;
    width: 100px;
    height: 100px;
    object-fit: cover;
}

/* REVIEW BUTTON */
#ReviewButton {
    background-color: rgb(213, 213, 213);
    color: rgb(0, 0, 0);
    border-color: rgba(167, 167, 167, 0.8);;
    font-family: "Quicksand", "Garamond", serif;
    font-size: clamp(0.85rem, 2vw, 2rem);
    width: 90%;
    height: 35%;
    margin-left: 5%;
    cursor: pointer;
}

#ReferenceLogosContainer {
    margin-top: 10%;
    margin-bottom: 5%;
}

.ReferenceImages {
    margin-right: 5%;
    margin-left: 20%;
    width: 75px;
    height: 75px;
}

/* ANIMATION REFERENCES */
.grow:hover {
    animation-name: grow;
    animation-duration: 0.5s;
}

.shrink {
    animation-name: shrink;
    animation-duration: 0.5s;
}

.growcurrent:hover {
    animation-name: growcurrent;
    animation-duration: 0.5s;
}

.shrinkcurrent {
    animation-name: shrinkcurrent;
    animation-duration: 0.5s;
}

.itemhover:hover {
    animation-name: itemhover;
    animation-duration: 0.5s;
}

/* ANIMATIONS */
@keyframes grow {
    0% {background-color: rgb(213, 213, 213);
        color: rgb(0, 0, 0);
        font-size: clamp(0.85rem, 2vw, 2rem);}
    100% {background-color: rgba(167, 167, 167, 0.8);
        color: rgb(254, 21, 161);
        font-size: 2.5rem;}
}

@keyframes shrink {
    0% {background-color: rgba(167, 167, 167, 0.8);
        color: rgb(254, 21, 161);
        font-size: 2.5rem;}
    100% {background-color: rgb(213, 213, 213);
        color: rgb(0, 0, 0);
        font-size: clamp(0.85rem, 2vw, 2rem);}
}

@keyframes growcurrent {
    0% {background-color: rgb(213, 213, 213);
        color: rgb(251, 95, 181);
        font-size: clamp(0.85rem, 2vw, 2rem);}
    100% {background-color: rgba(167, 167, 167, 0.8);
        color: rgb(254, 21, 161);
        font-size: 2.5rem;}
}

@keyframes shrinkcurrent {
    0% {background-color: rgba(167, 167, 167, 0.8);
        color: rgb(254, 21, 161);
        font-size: 2.5rem;}
    100% {background-color: rgb(213, 213, 213);
        color: rgb(251, 95, 181);
        font-size: clamp(0.85rem, 2vw, 2rem);}
}

@keyframes itemhover {
    0% {border-radius: 0px;
        border-color: white;
        box-shadow: 0px 0px 0px black;}
    100% {border-radius: 7px;
        border-color: white;
        box-shadow: 0px 0px 7px black;}
}

/* IMPORTED FONTS */
@font-face {
    font-family: Quicksand;
    src: url("Quicksand-Regular.ttf");
}